<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>DT-chain: Experiment</title>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/echarts5_min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <style type="text/css">
        /*body{background-color: #100c2a;}*/
        body{overflow:Scroll; overflow-y:hidden}
        .main-chart-wrap{width: 100%; height: 800px; margin-top: 30px;}
        .data-checkbox-wrap{margin-top: 15px}
        .data-checkbox-container{display: inherit}
        .margin-right-5{margin-right: 8px}
    </style>

</head>

<body>
    <div class="container" style="padding: 20px 0;">
        <div class="row">

            <div class="col-12">
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="run_exp()">Re run exp</button>
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="get_data()">Re plot chart</button>
                <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#data-checkbox-wrap" aria-expanded="false" aria-controls="data-checkbox">Data checkbox</button>
            </div>

            <div class="collapse data-checkbox-wrap" id="data-checkbox-wrap">
                <div class="card card-body data-checkbox-container" id="data-checkbox-container">

<!--                    <input type="checkbox" class="btn-check" id="data-checkbox-node-1" value="1" autocomplete="off" onclick="data_check()" checked>-->
<!--                    <label class="btn btn-sm btn-outline-success" for="data-checkbox-node-1">node-1</label>-->

                </div>
            </div>

            <!-- main chart container div -->
            <div class="col-12 main-chart-wrap" id="main-chart-line-wrap"></div>
        </div>
    </div>


    <script>

        var data_package;
        var data_legend = [];
        var data_y_array = [];
        var data_select = [];

        var chartDom = document.getElementById('main-chart-line-wrap');
        var myChart = echarts.init(chartDom);

        $(document).ready(function(){
            run_exp();
        });

        // 请求 运行试验
        function run_exp() {
            $.ajax({
                type: "GET",
                timeout : 10000,
                url: "./exp_run_exp",
                contentType: "application/json; charset=utf-8",
                // data: JSON.stringify(post_msg),
                dataType: "json",
                success: function (message) {
                    if (message.state === 0) {
                        get_data();
                    }
                },
                error: function (message) {}
            });
        }

        // 请求实验数据
        function get_data() {
            $.ajax({
                type: "GET",
                timeout : 10000,
                url: "./exp_get_data",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (message) {
                    if (message.state === 0) {
                        data_package = message.content;
                        data_package.height.shift();
                        unpack_data();
                    }
                },
                error: function (message) {}
            });
        }

        // 数据拆包 处理
        function unpack_data() {
            for (let node in data_package.value) {
                data_legend[node-1] = 'node-' + node;
                data_y_array[node-1] = {
                  name: 'node-' + node,
                  type: 'line',
                  data: data_package.value[node]
                }
            }
            plot_chart_line();
            data_checkbox_generate();
        }

        // 绘图函数 折线图
        function plot_chart_line() {
            let option;

            option = {
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: data_legend
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data_package.height
              },
              yAxis: {
                type: 'value',
                interval: 0.1
              },
              series: data_y_array
            };

            myChart.setOption(option);
        }

        // 刷新图
        function refresh_chart() {
            // 根据 data_select 的 node_id 筛选数据
            let data_legend_select = [];
            let data_y_array_select = [];
            for (let id of data_select) {
                data_legend_select.push(data_legend[id-1]);
                data_y_array_select.push(data_y_array[id-1]);
            }

            let option = myChart.getOption();
            option.legend.data = data_legend_select;
            option.series = data_y_array_select;
            myChart.setOption(option, true);
        }

        // 复选框按钮生成
        function data_checkbox_generate() {

            let btn_html = '';
            for(let i = 0, length = data_legend.length; i < length; i++) {
                let id = data_legend[i].slice(5)
                btn_html += '<input type="checkbox" class="btn-check" id="data-checkbox-node-'
                    + id + '" value="' + id +'" autocomplete="off" onclick="data_check()" checked>'
                    + '<label class="btn btn-sm btn-outline-primary margin-right-5" for="data-checkbox-node-'
                    + id + '">' + id + '</label>';
                $('#data-checkbox-container').html(btn_html);
            }
        }

        // 数据筛选显示
        function data_check() {
            let select = [];
            for(let i = 0, length = data_legend.length; i < length; i++) {
                let id = '#data-checkbox-' + data_legend[i];
                let ele = $(id);
                if (ele.prop('checked')) {
                    select.push(Number(ele.val()));
                }
            }
            data_select = select;
            refresh_chart();
        }

    </script>

</body>

</html>